<!-- 仪表盘 canvas -->
<template>
  <div v-if="pageData" class='border-bottom-one-rem'>
    <canvas id="canvas" class="canvas"></canvas>
  </div>
</template>

<script>
let canvas;
let ctx;
export default {
  props:['pageData'],
  components: {},
  data() {
    return {
        
      };
  },
  watch:{
    'pageData':{
      handler(){
        this.initCanvas()
      }
    }
  },
  mounted(){
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
      this.drawSmile(this.pageData)
    },
    drawSmile(pageData) {
      
      let ratio = window.devicePixelRatio||2
      // 设置宽高
      let width = canvas.width = 375*ratio
      let height = canvas.height = 263*ratio
      
      let oneDeg = Math.PI/180
      // 更改坐标系原点
      ctx.save()
      ctx.translate(width/2,height/2)
      ctx.rotate(Math.PI)//将坐标系旋转180°，得到与数学坐标系水平相反的坐标系，如图一
      ctx.scale(-1, 1);//将坐标系水平翻转，如图二
      ctx.scale(ratio,ratio)
      // 辅助用坐标系
      // drawLine(-150, 0, 150, 0);//x轴
      // drawLine(0,0,0,150);//Y轴
      function drawLine(x1,y1,x2,y2){
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2,y2);
        ctx.stroke();
      }

      // 绘制圆弧
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth= 20;
      ctx.strokeStyle = '#E6E6E6'
      ctx.arc(0,0,65,0,360*oneDeg)
      ctx.stroke()
      ctx.restore()

      //蓝色条
      let redBegainAngle = drwCircle(0,pageData.blue,'#5685FD')
      // 红色
      ctx.save()
      ctx.rotate(Math.PI/2)
      ctx.rotate(redBegainAngle)
      ctx.beginPath()
      ctx.lineWidth= 20;
      ctx.strokeStyle = '#BB383E'
      ctx.arc(0,0,65,0,-pageData.red*3.6*oneDeg,true)
      ctx.stroke()
      ctx.restore()
      //红色小圆
      let x = 65*Math.sin(-redBegainAngle+pageData.red*3.6*oneDeg) 
      let y = 65*Math.cos(-redBegainAngle+pageData.red*3.6*oneDeg)
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth= 1;
      ctx.strokeStyle = '#BB383E'
      ctx.fillStyle='#BB383E';
      ctx.arc(x,y,9.5,0,2*Math.PI)
      ctx.fill()
      ctx.stroke()
      ctx.restore()

      // 蓝色小圆
      let x1 = 65*Math.sin(-redBegainAngle) 
      let y1 = 65*Math.cos(-redBegainAngle)
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth= 1;
      ctx.strokeStyle = '#5685FD'
      ctx.fillStyle='#5685FD';
      ctx.arc(x1,y1,9.5,0,2*Math.PI)
      ctx.fill()
      ctx.stroke()
      ctx.restore()


      // 绘制百分比文字
      ctx.save()
      ctx.beginPath()
      ctx.scale(1,-1)
      ctx.font = "30px PingFangSC-Regular";
      ctx.textAlign = 'center'
      ctx.fillText(pageData.percent+'%', 0,0);
      ctx.beginPath()
      ctx.font = "11px PingFangSC-Regular";
      ctx.fillStyle ="#767676"
      ctx.fillText('当期完成率', 0,20);
      ctx.restore()

      // 绘制外环文字
      const textArr = ['全年度自查','年度登高计划','年度登高计划','一季度自查','上半年自查','三季度自查']
      for (let i = 0; i < textArr.length; i++) {
        let angle = (60*i-90)*oneDeg;
        let R = 120;
        if(i===0||i===3){
          R = 100
        }
        const txt = textArr[i]
        ctx.save()
        ctx.beginPath()
        ctx.scale(1,-1)
        ctx.font = "12px PingFangSC-Regular";
        ctx.textAlign = 'center'
        ctx.fillText(txt, R*Math.cos(angle),R*Math.sin(angle));
        ctx.restore()
      }




      ctx.restore()
      function drwCircle (begainAngle,value,color) {
        let angle = -value*3.6*oneDeg
        ctx.save()
        ctx.rotate(Math.PI/2)
        ctx.beginPath()
        ctx.lineWidth= 20;
        ctx.strokeStyle = color
        ctx.arc(0,0,65,begainAngle,angle,true)
        ctx.stroke()
        ctx.restore()
        return angle
      }
    }
  }
}
</script>
<style scoped>
.canvas{
  margin: 1rem 0;
  box-sizing: border-box;
  height: 263px;
  width: 100vw;
  /* background: cornflowerblue; */
}
</style>